<!-- src/views/RegisterView.vue -->
<template>
	<div
		class="flex min-h-screen flex-col md:items-center items-start justify-start bg-gray-50 dark:bg-gray-900 p-4"
	>
		<AppHeader
			@back="handleBack"
			class="md:hidden w-full bg-gray-50"
			:right-placeholder="true"
		>
			<template #center>
				<h1 class="text-base font-bold text-gray-900 dark:text-white">
					 注册账号 
				</h1>
			</template>
		</AppHeader>
		<div
			class="w-full max-w-md p-6 md:p-8 space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
		>
			<div class="text-center">
				<h1 class="text-3xl font-bold text-gray-900 dark:text-white">
					创建新账户
				</h1>
				<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
					已有账户？
					<router-link
						to="/login"
						class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300"
					>
						直接登录
					</router-link>
				</p>
			</div>

			<form class="space-y-6" @submit.prevent="onRegisterSubmit">
				<div>
					<label
						for="username"
						class="block text-sm font-medium text-gray-700 dark:text-gray-300"
						>用户名</label
					>
					<input
						v-model="form.username"
						id="username"
						name="username"
						type="text"
						autocomplete="username"
						required
						class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"
						placeholder="设置您的用户名"
					/>
				</div>

				<div>
					<label
						for="password"
						class="block text-sm font-medium text-gray-700 dark:text-gray-300"
						>密码</label
					>
					<input
						v-model="form.password"
						id="password"
						name="password"
						type="password"
						autocomplete="new-password"
						required
						class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"
						placeholder="设置您的密码"
					/>
				</div>

				<div>
					<label
						for="confirm-password"
						class="block text-sm font-medium text-gray-700 dark:text-gray-300"
						>确认密码</label
					>
					<input
						v-model="form.confirmPassword"
						id="confirm-password"
						name="confirm-password"
						type="password"
						autocomplete="new-password"
						required
						class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"
						placeholder="请再次输入密码"
					/>
				</div>

				<div>
					<button
						type="submit"
						:disabled="isLoading"
						class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
					>
						<span v-if="isLoading">注册并登录中...</span>
						<span v-else>注册并登录</span>
					</button>
				</div>
			</form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { md5 } from "js-md5";
import { useUserStore } from "@/store/modules/user";
import { useModal } from "@/hooks/useModal";
import ToastModal from "@/modal/components/ToastModal.vue";
import AppHeader from "@/components/AppHeader.vue";

const modal = useModal();
const router = useRouter();
const userStore = useUserStore();

const handleBack = () => {
	router.back();
};

const showToast = (message: string) => {
	modal.show(
		ToastModal,
		{ message },
		{
			position: "center",
			animationType: "slide-up",
			showOverlay: true,
			closeOnClickOverlay: false,
			duration: 1000,
		}
	);
};

const form = reactive({
	username: "",
	password: "",
	confirmPassword: "",
});

const isLoading = ref(false);

const onRegisterSubmit = async () => {
	if (isLoading.value) return;

	// 基础校验
	if (form.password !== form.confirmPassword) {
		showToast("两次输入的密码不一致！");
		return;
	}
	if (form.password.length < 6) {
		showToast("密码长度不能少于6位！");
		return;
	}

	isLoading.value = true;
	try {
		// 注册成功后会自动登录
		await userStore.handleRegister({
			username: form.username,
			password: md5(form.password), // 加密密码
		});
		// 注册并登录成功后，跳转到“我的”页面
		router.replace("/");
	} catch (error: any) {
		showToast("注册失败,请稍后再试");
	} finally {
		isLoading.value = false;
	}
};
</script>
